<template>
  <span class="icon" :class="['icon_'+kind, iconCls]"></span>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      }
    },
    props: {
      iconClsNum: {
        type: Number,
        required: true
      },
      kind: {
        type: Number,
        default: 1
      }
    }，
    computed: {
      iconCls() {
        return this.classMap[this.iconClsNum]
      }
    }
  }
</script>

<style lang="scss">
  @import "../../common/stylus/mixin";
  .icon {
    display: inline-block;
    vertical-align: top;
    background-repeat: no-repeat;
    &.icon_1 {
      width: 12px;
      height: 12px;
      background-size: 12px 12px;
      &.decrease {
        @include bg-image('img/decrease_1');
      }
      &.discount {
        @include bg-image('img/discount_1');
      }
      &.guarantee {
        @include bg-image('img/guarantee_1');
      }
      &.invoice {
        @include bg-image('img/invoice_1');
      }
      &.special {
        @include bg-image('img/special_1');
      }
    }
    &.icon_2 {
      width: 16px;
      height: 16px;
      background-size: 16px 16px;
      &.decrease {
        @include bg-image('img/decrease_2');
      }
      &.discount {
        @include bg-image('img/discount_2');
      }
      &.guarantee {
        @include bg-image('img/guarantee_2');
      }
      &.invoice {
        @include bg-image('img/invoice_2');
      }
      &.special {
        @include bg-image('img/special_2');
      }
    }
    &.icon_3 {
      width: 12px;
      height: 12px;
      background-size: 12px 12px;
      &.decrease {
        @include bg-image('img/decrease_3');
      }
      &.discount {
        @include bg-image('img/discount_3');
      }
      &.guarantee {
        @include bg-image('img/guarantee_3');
      }
      &.invoice {
        @include bg-image('img/invoice_3');
      }
      &.special {
        @include bg-image('img/special_3');
      }
    }
    &.icon_4 {
      width: 16px;
      height: 16px;
      background-size: 16px 16px;
      &.decrease {
        @include bg-image('img/decrease_4');
      }
      &.discount {
        @include bg-image('img/discount_4');
      }
      &.guarantee {
        @include bg-image('img/guarantee_4');
      }
      &.invoice {
        @include bg-image('img/invoice_4');
      }
      &.special {
        @include bg-image('img/special_4');
      }
    }
  }
</style>